<template>
  <div class="content">
    <header>
      <p class="title">
         长期用户 - 添加用户
      </p>
    </header>
    <section class="add_content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户姓名" prop="real_name">
            <el-input v-model="ruleForm.real_name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
         <el-form-item label="账号类型" prop="type">
           <el-select v-model="ruleForm.type" placeholder="请选择" change='change'>
              <el-option
                v-for="item in select.type"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="部门" prop="depar_id">
          <el-select v-model="ruleForm.depar_id" placeholder="请选择" change='change'>
             <el-option
               v-for="item in select.depar"
               :key="item.id"
               :label="item.name"
               :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="权限" prop="permiss_id">
          <el-select v-model="ruleForm.permiss_id" placeholder="请选择" change='change'>
             <el-option
               v-for="item in select.permiss"
               :key="item.id"
               :label="item.permiss_name"
               :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
        </el-form>
        <div class="btn">
          <span @click='submit()'>提交</span>
          <span @click='cancle()'>取消</span>
        </div>
    </section>
  </div>
</template>

<script>
  import {getadd_account,permiss_list,depar_list,add_account} from '@/js/getApi.js'
  import {formverify} from '../js/unit.js'
  export default{
    props:['isshow'],
    data(){
      return{
        ruleForm:{
          token:this.$store.state.token,
          real_name:'',
          mobile:'',
          type:'',
          depar_id:'',
          permiss_id:''
        },
        select:{
          type:[
            {
            id:2,
            name:'公司员工'
            },
            {
            id:4,
            name:'安装工'
            }
          ],
          depar:[],
          permiss:[]
        },
        rules: {
               real_name: [ { required: true, message: '请输入姓名', trigger: 'blur' }],
               mobile: [ { required: true, message: '请输入电话号码', trigger: 'blur' }],
               type:[ { required: true, message: '请选择账号类型', trigger: 'blur' }],
			         depar_id:[ { required: true, message: '请选择部门', trigger: 'blur' }],
               permiss_id:[ { required: true, message: '请选择权限', trigger: 'blur' }]
               }
      }
    },
    methods:{
     async submit(){
        const data=await add_account(this.ruleForm);
        if(data){
          alert(data.msg);
          if(data.code==1){
           this.$parent.getlist();
           this.cancle();
          }
        }else{
          alert('服务器错误！')
        }

      },
      cancle(){
        this.isshow.cunblock=true;
        this.isshow.add=false;
      }
    },
   async  created() {
         this.select.depar=await depar_list(this.$store.state.token);
         this.select.permiss=await permiss_list(this.$store.state.token);

    }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section.add_content{
    margin-top: 30px;
    width: 400px;
  }
  .btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }



















</style>
